<template>
  <div id="AccountIndex">
    <!-- 查询条件 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input placeholder="台账名称" v-model="queryParam.goodsName" clearable></el-input>
      </el-col>
      <el-col :span="3">
        <el-cascader placeholder="请选择物资类型" v-model="queryParam.typeId" :options="typeOptions"
          :props="typeProps"></el-cascader>
      </el-col>
      <el-col :span="6">
        <el-date-picker v-model="queryParam.addTime" align="right" type="date" placeholder="选择日期"
          :picker-options="queryParam.addTime">
        </el-date-picker>
      </el-col>
      <el-col :span="6">
        <el-button @click="getTableData()" type="primary" icon="el-icon-search" plain>查询</el-button>
        <el-button @click="queryParamClean" type="warning" icon="el-icon-refresh" plain>清空</el-button>
      </el-col>
    </el-row>
    <!-- 业务操作按钮组 -->
    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <el-button @click="dialog.addOrEdit = true" type="success" icon="el-icon-circle-plus-outline"
          plain>添加台账</el-button>
      </el-col>
    </el-row>

    <!-- 数据表格 -->
    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <el-table :data="tableData" border style="width: 100%" @selection-change="tableSelectChange">
          <el-table-column prop="goodsName" label="台账名称"></el-table-column>
          <el-table-column prop="typeName" width="180" label="物资类型"></el-table-column>
          <el-table-column prop="whName" width="180" label="所属仓库"></el-table-column>
          <el-table-column prop="goodsNum" width="180" label="物资数量"></el-table-column>
          <el-table-column prop="unit" width="180" label="单位"></el-table-column>
          <el-table-column prop="insertTime" width="180" label="存入时间"></el-table-column>
          <el-table-column prop="customAttrMsg" width="180" label="自定义属性"></el-table-column>
          <el-table-column fixed="right" label="操作" width="220" align="center">
            <template slot-scope="scope">
              <el-button @click="toShow(scope.row.accountID)" plain title="查看" size="mini"
                icon="el-icon-search"></el-button>
              <el-button @click="toEdit(scope.row.accountID)" plain type="warning" size="mini" title="修改"
                icon="el-icon-edit"></el-button>
              <el-button @click="toDelete(scope.row.accountID)" plain type="danger" size="mini" title="出库"
                icon="el-icon-delete"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 分页工具 -->
    <el-row>
      <el-col :span="24">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pageParam.page" :page-sizes="[10, 30, 60, 100]" :page-size="pageParam.size"
          layout="total, sizes, prev, pager, next, jumper" :total="pageParam.total">
        </el-pagination>
      </el-col>
    </el-row>

    <!-- 新增\修改用户信息弹窗 -->
    <el-dialog :title="(isEdit == true ? '编辑' : '新增') + '台账'" :visible.sync="dialog.addOrEdit"
      :close-on-click-modal="false" :show-close="false" width="55%">
      <el-form ref="accountAddOrEditForm" :rules="formRules" :model="addOrEditFormData" label-width="100px">
        <el-form-item label="台账名称" prop="goodsName">
          <el-input v-model="addOrEditFormData.goodsName" placeholder="请填写台账名称" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="分类" prop="typeId">
          <el-cascader v-model="addOrEditFormData.typeId" :options="typeOptions" :props="typeProps"></el-cascader>
        </el-form-item>
        <el-form-item label="仓库" prop="whId">
          <el-select v-model="addOrEditFormData.whId" placeholder="请选择">
            <el-option v-for="item in whOptions" :key="item.whId" :label="item.whName" :value="item.whId"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="!isEdit" label="数量" prop="goodsNum">
          <el-input v-model="addOrEditFormData.goodsNum" placeholder="请填写数量" show-word-limit maxlength="35"></el-input>
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-input v-model="addOrEditFormData.unit" placeholder="请填写单位" maxlength="35" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="占比" prop="percentage">
          <el-input v-model="addOrEditFormData.percentage" placeholder="请填写物资占比" maxlength="10"
            show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="自定义属性" prop="customAttrMsg">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" placeholder="请输入自定义属性"
            v-model="addOrEditFormData.customAttrMsg">
          </el-input>
        </el-form-item>
        <el-form-item label="存储时长" prop="storageTime">
          <el-input v-model="addOrEditFormData.storageTime" placeholder="请填写存储时长" maxlength="35"
            show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="存入人" prop="depositPersonName">
          <el-input v-model="addOrEditFormData.depositPersonName" placeholder="请填写存入人" maxlength="35"
            show-word-limit></el-input>
        </el-form-item>
        <el-form-item>
          <el-button plain @click="formClose">关闭</el-button>
          <el-button type="warning" plain @click="formRest">重置</el-button>
          <el-button type="primary" @click="doSaveAccount">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 查看弹窗组件 -->
    <el-dialog title="台账详情" :visible.sync="dialog.show" :close-on-click-modal="false" :show-close="false" width="50%">
      <el-descriptions :title="showData.userName" :column="3" border>
        <template slot="extra">
          <el-button type="primary" size="small" @click="closeShowData">关闭</el-button>
        </template>
        <el-descriptions-item label="订单编号">{{
          showData.goodsId
        }}</el-descriptions-item>
        <el-descriptions-item label="存入人">
          {{ showData.storagePersonName }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import * as GoodsAPI from "@/api/goods.js";
export default {
  name: "GoodsTable",
  data() {
    return {
      // 类型数据
      typeValue: [],
      typeOptions: [],
      typeProps: {
        value: "typeId",
        label: "typeName",
        checkStrictly: true,
        emitPath: false
      },
      // 保鲜仓数据
      whOptions: [],


      useName: this.$cookies.get("userName"),

      ld: false,
      // 是否是修改
      isEdit: false,
      // 页面中弹窗状态
      dialog: {
        addOrEdit: false,
        show: false,
      },
      // 查询参数
      queryParam: {
        goodsName: null,
        typeId: null,
        addTime: null,

      },
      // 分页参数
      pageParam: {
        size: 10, // 每页显示的行数
        page: 1, // 当前访问的页码
        total: 100, // 总条目数
      },

      tableData: [],
      // 数据添加时表单信息
      addOrEditFormData: {
        goodsName: null,
        typeId: null,
        whId: null,
        goodsNum: null,
        unit: null,
        customAttrMsg: null,
        customAttrId: null,
        storageTime: null,
        depositPersonName: null,
        percentage: null,
      },
      // 查看时详情数据
      showData: {
        goodsId: null,
        percentage: null,
        depositPersonName: null,
      },
      // 用户新增表单提交验证规则
      formRules: {
        goodsName: {
          required: true,
          message: "请输入台账名称",
          trigger: "blur",
        },
        typeId: { required: true, message: "请选择物资类型", trigger: "blur" },
        whId: { required: true, message: "请选择仓库", trigger: "blur" },
        goodsNum: {
          required: true,
          message: "请输入物资数量",
          trigger: "blur",
        },
        unit: { required: true, message: "请输入单位", trigger: "blur" },
        percentage: { required: true, message: "请输入物资占比", trigger: "blur" },
        customAttrMsg: {
          required: true,
          message: "请输入自定义信息",
          trigger: "blur",
        },
        addTime: { required: true, message: "请选择存入时间", trigger: "blur" },
        storageTime: {
          required: true,
          message: "请输入存储时长",
          trigger: "blur",
        },
        depositPersonName: {
          required: true,
          message: "请输入存入人",
          trigger: "blur",
        },
      },

      // 当前表格选中的数据
      nowTableSelectedList: [],

    };
  },
  mounted() {
    this.getGoodsTypeData();
    this.getWhByUseName();
    this.getTableData();
  },
  methods: {

    handleChange(value) {
      console.log(value);
    },
    //查询物资类型数据
    getGoodsTypeData() {
      let _this = this;
      GoodsAPI.getAllGoodsType().then(function (res) {
        if (res.code == "200") {
          _this.typeValue = res.data;
          _this.typeOptions = _this.$myUtil.list2TreeData(_this.typeValue, null, "typeId");
        }

      });
    },
    //查询仓库数据
    getWhByUseName() {
      let _this = this;
      GoodsAPI.getWhByUseName(_this.useName).then(function (res) {
        if (res.code == "200") {
          _this.whOptions = res.data;
        }
      });
    },

    // 查询数据表格
    getTableData() {
      let _this = this;
      GoodsAPI.page(_this.queryParam, _this.pageParam).then(function (res) {
        if (res.code == "200") {
          _this.tableData = res.data.rows;
          _this.pageParam.page = res.data.page;
          _this.pageParam.total = res.data.total;
          _this.pageParam.size = res.data.pageSize;
        }
      });
    },
    // 清空查询条件
    queryParamClean() {
      this.queryParam = {
        goodsName: null,
        typeId: null,
        addTime: null,
      };

      this.getTableData();
    },
    // 当每页显示的行数切换
    handleSizeChange(data) {
      this.pageParam.size = data;

      // 调用查询分页数据操作
      this.getTableData();
    },
    // 切换页码时
    handleCurrentChange(data) {
      this.pageParam.page = data;

      // 调用查询分页数据操作
      this.getTableData();
    },
    // 关闭新增用户弹窗
    formClose() {
      this.dialog.addOrEdit = false;
      this.addOrEditFormData = {
        goodsName: null,
        typeId: null,
        whId: null,
        goodsNum: null,
        unit: null,
        customAttrMsg: null,
        customAttrId: null,
        storageTime: null,
        depositPersonName: null,
        percentage: null,
      };
      this.isEdit = false;
    },
    // 关闭详情查看弹窗
    closeShowData() {
      this.showData = {
        goodsId: null,
        depositPersonName: null,
      };

      this.dialog.show = false;
    },
    // 重置新增用户表单
    formRest() {
      this.addOrEditFormData = {
        goodsName: null,
        typeId: null,
        whId: null,
        goodsNum: null,
        unit: null,
        customAttrMsg: null,
        customAttrId: null,
        storageTime: null,
        depositPersonName: null,
        percentage: null,
      };
    },
    // 提交新增用户表单
    doSaveAccount() {
      // 进行表单验证
      this.$refs.accountAddOrEditForm.validate((valid) => {
        if (valid) {
          // 登录功能
          this.submitaddCustomattr();
          this.submitAddOrEdit();
        } else {
          return false;
        }
      });
    },
    //提交自定义属性axios
    submitaddCustomattr() {
      let _this = this;
      GoodsAPI.addCustomattr(_this.addOrEditFormData.customAttrMsg).then(function (res) {
        if (res.code == "200") {
          _this.addOrEditFormData.customAttrId = res.data.customAttrId
        }
      });
    },
    // 提交表单axios
    submitAddOrEdit() {
      if (this.isEdit) {
        // 编辑
        let _this = this;
        accountAPI.update(_this.addOrEditFormData).then(function (res) {
          if (res.code == "200") {
            _this.formClose();
            _this.getTableData();
          }
        });
      } else {
        // 新增
        let _this = this;
        GoodsAPI.addGoods(_this.addOrEditFormData).then(function (res) {
          if (res.code == "200") {
            _this.formClose();
            _this.getTableData();
          }
        });
      }
    },
    // 提交删除axios
    submitDelete(pkID) {
      let _this = this;
      accountAPI.deletes(pkID).then(function (res) {
        if (res.code == "200") {
          _this.getTableData();
        }
      });
    },
    // 提交解锁axios
    submitUnlock(pkID) {
      let _this = this;
      accountAPI.unclocks(pkID).then(function (res) {
        if (res.code == "200") {
          // 2. 赋值给修改表单数据
          _this.getTableData();
        }
      });
    },
    // 提交修改密码axios
    submitChangePWD() {
      let _this = this;
      accountAPI.updatePwd(_this.changePWDFormData).then(function (res) {
        if (res.code == "200") {
          _this.changePwdFormClose();

          _this.getTableData();
        }
      });
    },
    // 操作栏-编辑
    toEdit(pkID) {
      // 1. 后端查询当前行的数据进行更新（不要拿前端的数据更新）

      let _this = this;
      accountAPI.getByID(pkID).then(function (res) {
        if (res.code == "200") {
          // 2. 赋值给修改表单数据
          _this.addOrEditFormData = res.data;
        }
      });

      // 3. 告诉弹窗现在是修改时间
      this.isEdit = true;

      // 4. 打开修改弹窗
      this.dialog.addOrEdit = true;
    },
    // 操作栏-查看
    toShow(pkID) {
      let _this = this;
      accountAPI.getByID(pkID).then(function (res) {
        if (res.code == "200") {
          // 2. 赋值给修改表单数据
          _this.showData = res.data;
        }
      });

      this.dialog.show = true;
    },
    // 操作栏-单行删除
    toDelete(pkID) {
      // 当点击删除时提示询问是否进行删除
      this.$confirm("是否确定要删除该账号信息?", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 当点击确定时

          // 调用删除方法进行删除
          this.submitDelete(pkID);
        })
        .catch(() => {
          // 当点击取消时
        });
    },
    // 操作栏-解除锁定
    toUnlock(pkID) {
      // 当点击删除时提示询问是否进行删除
      this.$confirm("是否确定要解锁该账号吗?", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 当点击确定时

          // 调用删除方法进行删除
          this.submitUnlock(pkID);
        })
        .catch(() => {
          // 当点击取消时
        });
    },
    // 进行密码修改
    toCahngePWD(pkID) {
      // 1. 表单数据赋值
      this.changePWDFormData.accountID = pkID;

      // 2. 修改密码弹窗打开
      this.dialog.changePWD = true;
    },
    // 触发批量删除操作
    moreDelete() {
      // 1. 判断表格是否选中数据
      if (this.nowTableSelectedList.length <= 0) {
        this.$message.warning("请至少选择一行数据再操作！");
        return;
      }

      // 2. 问询
      this.$confirm(
        "确定要删除这【" + this.nowTableSelectedList.length + "】行数据吗?",
        "删除提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // 当点击确定时

          let ids = "";

          for (var i in this.nowTableSelectedList) {
            ids += this.nowTableSelectedList[i].accountID + ",";
          }

          // 调用删除方法进行删除
          this.submitDelete(ids.substring(0, ids.length - 1));
        })
        .catch(() => {
          // 当点击取消时
        });
    },
    // 批量解锁功能
    moreUnlock() {
      // 1. 判断表格是否选中数据
      if (this.nowTableSelectedList.length <= 0) {
        this.$message.warning("请至少选择一行数据再操作！");
        return;
      }

      // 2. 问询
      this.$confirm(
        "确定要解锁这【" + this.nowTableSelectedList.length + "】个账号吗?",
        "删除提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // 当点击确定时

          let ids = "";

          for (var i in this.nowTableSelectedList) {
            ids += this.nowTableSelectedList[i].accountID + ",";
          }

          // 调用解锁方法进行
          this.submitUnlock(ids.substring(0, ids.length - 1));
        })
        .catch(() => {
          // 当点击取消时
        });
    },
    // 当表格复选框选中变化时触发
    tableSelectChange(data) {
      this.nowTableSelectedList = data;
    },
    // 菜单栏-点击更多操作项目触发回调
    moreMenuSelect(cm) {
      // 参数效果： unlock:主键
      // 1. 拆分指令
      let arr = cm.split(":");
      let methodName = arr[0];
      let pkID = arr[1];

      if (methodName == "changePWD") {
        // 进行修改密码操作
        this.toCahngePWD(pkID);
      } else if (methodName == "unLock") {
        // 解锁
        this.toUnlock(pkID);
      }
    },
    // 关闭修改密码弹窗
    changePwdFormClose() {
      this.dialog.changePWD = false;
      this.changePWDFormData = {
        accountID: null,
        oldPwd: null,
        newPwd: null,
        newPwd2: null,
      };
    },
    // 重置修改密码表单
    changePwdFormRest() {
      this.changePWDFormData = {
        accountID: null,
        oldPwd: null,
        newPwd: null,
        newPwd2: null,
      };
    },
    // 保存修改密码
    doSavePwdChange() {
      // 进行表单验证
      this.$refs.accountChangePWDForm.validate((valid) => {
        if (valid) {
          // 修改密码操作
          this.submitChangePWD();
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<!-- CSS代码 -->
<style scoped></style>